<template>
  <div class="waterEcharts">
    <div
      ref="container"
      class="container"
      style="width:100%; height: 200px"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'WaterEcharts',
  // eslint-disable-next-line vue/require-prop-types
  props: ['task'],
  data() {
    return {
      taskArr: []
    }
  },
  watch: {
    task(newVal) {
      this.myEcharts(newVal)
      console.log(newVal)
    }
  },
  created() {
    console.log(this.task)
  },
  mounted() {
    // setTimeout(() => {
    // }, 500)
  },
  methods: {
    myEcharts(task) {
      const myChart = echarts.init(this.$refs.container)
      myChart.setOption({
        title: {
          show: true,
          x: '50%',
          y: '60%',
          z: 10,
          textAlign: 'center',
          textStyle: {
            color: '#20232a',
            fontSize: 68,
            fontWeight: 500
          }
        },
        series: task.map((item) => {
          if (item.waitingPickupRate) {
            return {
              type: 'liquidFill',
              radius: '60%',
              center: [`12%`, '50%'],
              itemStyle: { // 水球图样式
                opacity: 1, // 水球图透明度
                shadowBlur: 0 // 波浪的阴影范围
              },
              data: [item.waitingPickupRate / 100],
              label: {
                normal: {
                  textStyle: {
                    color: '#20232a',
                    fontSize: 16
                  },
                  // 设置对应的工作台文字背景色
                  insideColor: '#20232a'
                }
              },
              // 波浪颜色
              color: ['#e35d3e'],
              backgroundStyle: {
                color: '#ffe5e0'
              },
              outline: { // 是否显示外圈
                show: true,
                borderDistance: 6, // 外部圆线距离水球的距离
                itemStyle: { // 外部圆线样式
                  borderWidth: 1, // 外部圆线宽度
                  borderColor: '#e25d3e' // 外部圆线颜色
                  // shadowBlur: 20, // 外部圆线阴影范围
                  // shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                }
              }
            }
          } else if (item.waitingDispatchRate) {
            return {
              type: 'liquidFill',
              radius: '60%',
              center: [`38%`, '50%'],
              itemStyle: { // 水球图样式
                opacity: 1, // 水球图透明度
                shadowBlur: 0 // 波浪的阴影范围
              },
              data: [item.waitingDispatchRate / 100],
              label: {
                normal: {
                  textStyle: {
                    color: '#20232a',
                    fontSize: 16
                  },
                  insideColor: '#20232a'
                }
              },
              // 波浪颜色
              color: ['#ffc45e'],
              backgroundStyle: {
                color: '#fff1d9'
              },
              outline: { // 是否显示外圈
                show: true,
                borderDistance: 6, // 外部圆线距离水球的距离
                itemStyle: { // 外部圆线样式
                  borderWidth: 1, // 外部圆线宽度
                  borderColor: '#e25d3e' // 外部圆线颜色
                  // shadowBlur: 20, // 外部圆线阴影范围
                  // shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                }
              }
            }
          } else if (item.unassignedTransportTaskRate) {
            return {
              type: 'liquidFill',
              radius: '60%',
              center: [`62%`, '50%'],
              itemStyle: { // 水球图样式
                opacity: 1, // 水球图透明度
                shadowBlur: 0 // 波浪的阴影范围
              },
              data: [item.unassignedTransportTaskRate / 100],
              label: {
                normal: {
                  textStyle: {
                    color: '#20232a',
                    fontSize: 16
                  },
                  insideColor: '#20232a'
                }
              },
              // 波浪颜色
              color: ['#e35d3e'],
              backgroundStyle: {
                color: '#ffe5e0'
              },
              outline: { // 是否显示外圈
                show: true,
                borderDistance: 6, // 外部圆线距离水球的距离
                itemStyle: { // 外部圆线样式
                  borderWidth: 1, // 外部圆线宽度
                  borderColor: '#e25d3e' // 外部圆线颜色
                  // shadowBlur: 20, // 外部圆线阴影范围
                  // shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                }
              }
            }
          } else if (item.timeoutTransportTaskRate) {
            return {
              type: 'liquidFill',
              radius: '60%',
              center: [`88%`, '50%'],
              itemStyle: { // 水球图样式
                opacity: 1, // 水球图透明度
                shadowBlur: 0 // 波浪的阴影范围
              },
              data: [item.timeoutTransportTaskRate / 100],
              label: {
                normal: {
                  textStyle: {
                    color: '#20232a',
                    fontSize: 16
                  },
                  insideColor: '#20232a'
                }
              },
              // 波浪颜色
              color: ['#e35d3e'],
              backgroundStyle: {
                color: '#ffe5e0'
              },
              outline: { // 是否显示外圈
                show: true,
                borderDistance: 6, // 外部圆线距离水球的距离
                itemStyle: { // 外部圆线样式
                  borderWidth: 1, // 外部圆线宽度
                  borderColor: '#e25d3e' // 外部圆线颜色
                  // shadowBlur: 20, // 外部圆线阴影范围
                  // shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                }
              }
            }
          } else if (item.taskInTransitRate) {
            return {
              type: 'liquidFill',
              radius: '60%',
              center: [`25%`, '50%'],
              itemStyle: { // 水球图样式
                opacity: 1, // 水球图透明度
                shadowBlur: 0 // 波浪的阴影范围
              },
              data: [item.taskInTransitRate / 100],
              label: {
                normal: {
                  textStyle: {
                    color: '#20232a',
                    fontSize: 16
                  },
                  insideColor: '#20232a'
                }
              },
              // 波浪颜色
              color: ['#e35d3e'],
              backgroundStyle: {
                color: '#ffe5e0'
              },
              outline: { // 是否显示外圈
                show: true,
                borderDistance: 6, // 外部圆线距离水球的距离
                itemStyle: { // 外部圆线样式
                  borderWidth: 1, // 外部圆线宽度
                  borderColor: '#e25d3e' // 外部圆线颜色
                  // shadowBlur: 20, // 外部圆线阴影范围
                  // shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                }
              }
            }
          } else if (item.taskInDeliveryRate) {
            return {
              type: 'liquidFill',
              radius: '60%',
              center: [`75%`, '50%'],
              // 水滴图内部的阴影清除
              itemStyle: { // 水球图样式
                opacity: 1, // 水球图透明度
                shadowBlur: 0 // 波浪的阴影范围
              },
              data: [item.taskInDeliveryRate / 100],
              label: {
                normal: {
                  textStyle: {
                    color: '#20232a',
                    insideColor: '#20232a',
                    fontSize: 16
                  },
                  insideColor: '#20232a'
                }
              },
              // 波浪颜色
              color: ['#e35d3e'],
              backgroundStyle: {
                color: '#ffe5e0'
              },
              outline: { // 是否显示外圈
                show: true,
                borderDistance: 6, // 外部圆线距离水球的距离
                itemStyle: { // 外部圆线样式
                  borderWidth: 1, // 外部圆线宽度
                  borderColor: '#e25d3e' // 外部圆线颜色
                  // shadowBlur: 20, // 外部圆线阴影范围
                  // shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                }
              }
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="sass" scoped></style>
